<template>
    <div>
        <el-form ref="reForm" label-width="120px" class="mb_40">
            <el-form-item label="支付方式：" >
                <span>{{userInfo.type_name||'-'}}</span>
            </el-form-item>
            <el-form-item label="用户名：">
                <span>{{userInfo.name||'-'}}</span>
            </el-form-item>
            <el-form-item label="性别：">
                <span v-if="userInfo.sex==1">男</span>
                <span v-else-if="userInfo.sex==2">女</span>
                <span v-else>-</span>
            </el-form-item>
            <el-form-item v-if="userInfo.pay_type==1" label="账号：">
                <span>{{userInfo.account}}</span>
            </el-form-item>
            <el-form-item  v-if="userInfo.pay_type==2" label="二维码：">
                <div class="imgbox">
                    <img :src="userInfo.url" alt="" srcset="" class="img">
                </div>
            </el-form-item>
            <el-form-item label="联系方式：">
                <span>{{userInfo.phone||'-'}}</span>
            </el-form-item>
            <el-form-item label="家庭住址：">
                <span>{{userInfo.address||'-'}}</span>
            </el-form-item>
        </el-form>
        <div class="dialog-userfooter">
            <el-button @click="handleCancle">取 消</el-button>
            <!-- <el-button type="primary" :loading='loading' @click="handleSave">确 定</el-button> -->
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            
        }
    },
    
    props:{
        userInfo:{
            type:Object,
            default:{},
        }
    },
    created(){
    //    console.log('userinfo:',this.userInfo);
    },
    methods:{
        handleCancle(){
            this.$emit('close')
        }
       
    }
}
</script>
<style lang="scss" scoped>
.imgbox{
    width: 120px;
    height: 120px;
    border: 1px solid #eee;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    // overflow: hidden;
    .closeicon{
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 20px;
        color: red;
        cursor: pointer;
        display: none;
    }
    &:hover .closeicon{
        display: inline-block;
    }
    .img{
        width: 100%;
        height: 100%;
    }
}
.picmsg{
    color: #999;
}
.uploadimg{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}
</style>